<template>
  <div class="dashboard-container">
    <h2 class="page-title">数据面板</h2>
    
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon" color="#409EFF"><User /></el-icon>
            <div class="stat-info">
              <p class="stat-label">总用户数</p>
              <h3 class="stat-value">{{ stats.totalUsers }}</h3>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon" color="#67C23A"><Calendar /></el-icon>
            <div class="stat-info">
              <p class="stat-label">活动数量</p>
              <h3 class="stat-value">{{ stats.totalActivities }}</h3>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon" color="#E6A23C"><TrophyBase /></el-icon>
            <div class="stat-info">
              <p class="stat-label">成功案例</p>
              <h3 class="stat-value">{{ stats.totalCases }}</h3>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon" color="#F56C6C"><Reading /></el-icon>
            <div class="stat-info">
              <p class="stat-label">课程数量</p>
              <h3 class="stat-value">{{ stats.totalCourses }}</h3>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :xs="24" :md="12">
        <el-card shadow="hover">
          <template #header>
            <span>用户增长趋势</span>
          </template>
          <div class="chart-placeholder">
            <el-icon :size="80" color="#ccc"><TrendCharts /></el-icon>
            <p>图表区域（可集成 ECharts）</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :md="12">
        <el-card shadow="hover">
          <template #header>
            <span>活动报名统计</span>
          </template>
          <div class="chart-placeholder">
            <el-icon :size="80" color="#ccc"><DataAnalysis /></el-icon>
            <p>图表区域（可集成 ECharts）</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 最近活动 -->
    <el-card shadow="hover" class="recent-activities">
      <template #header>
        <span>最近活动</span>
      </template>
      <el-table :data="recentActivities" stripe style="width: 100%">
        <el-table-column prop="name" label="活动名称" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            <el-tag :type="row.type === 1 ? 'success' : 'primary'" size="small">
              {{ row.type === 1 ? '线上' : '线下' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="participants" label="报名人数" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="180" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { User, Calendar, TrophyBase, Reading, TrendCharts, DataAnalysis } from '@element-plus/icons-vue'

const stats = ref({
  totalUsers: 0,
  totalActivities: 0,
  totalCases: 0,
  totalCourses: 0
})

const recentActivities = ref([])

const loadStats = async () => {
  // TODO: 从 API 加载统计数据
  stats.value = {
    totalUsers: 1234,
    totalActivities: 56,
    totalCases: 89,
    totalCourses: 34
  }
}

const loadRecentActivities = async () => {
  // TODO: 从 API 加载最近活动
  recentActivities.value = [
    { name: '七夕相亲大会', type: 2, participants: 25, status: 1, startTime: '2025-08-28 14:00:00' },
    { name: '线上交友活动', type: 1, participants: 50, status: 2, startTime: '2025-08-20 19:00:00' },
    { name: '户外联谊活动', type: 2, participants: 30, status: 3, startTime: '2025-08-15 10:00:00' }
  ]
}

const getStatusType = (status) => {
  const types = { 1: 'info', 2: 'success', 3: 'warning' }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = { 1: '未开始', 2: '进行中', 3: '已结束' }
  return texts[status] || '未知'
}

onMounted(() => {
  loadStats()
  loadRecentActivities()
})
</script>

<style scoped>
.dashboard-container {
  padding: 0;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0 0 20px 0;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  font-size: 48px;
}

.stat-info {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin: 0 0 8px 0;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.charts-row {
  margin-bottom: 20px;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
}

.recent-activities {
  margin-top: 20px;
}
</style>

